<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>教师中心</title>
	<script>
		if (self == top) location.replace('/wechat/footer_wx.html?href=' +
			encodeURIComponent(location.href.substr(location.origin.length)));
	</script>
	<link rel="stylesheet" href="css/teacher_home.css">
	<link rel="stylesheet" href="css/head.css">
	<link rel="stylesheet" href="../css/window.css">
	<style scoped>
		[v-cloak] {
			display: none;
		}

		.mask_item_title {
			padding: 10px;
			text-align: center;
			font-size: 17px;
			font-weight: bold;
			font-family: 黑体;
		}

		.mask_item_content {
			width: 80%;
			margin: 0 auto;
			border: 1px solid #999;
			border-radius: 6px;
			overflow: hidden;
		}

		.mask_item_content_th {
			color: white;
			display: flex;
			font-size: 14px;
			justify-content: space-between;
			background: linear-gradient(to bottom, #4eaaf8, #117afd);
		}

		.mask_item_content_tb {
			display: flex;
			font-size: 14px;
			justify-content: space-between;
		}

		.mask_item_content_th_tr,
		.mask_item_content_tb_tr {
			width: 50%;
			text-align: center;
			padding: 10px;
			border-bottom: 1px solid #bfbfbf;
		}

		.borderRight {
			border-right: 1px solid #bfbfbf;
		}

		.mask_item_content_tb:last-child .mask_item_content_tb_tr {
			border-bottom: none;
		}

		.cancel {
			width: 28px;
			height: 28px;
			border-radius: 50%;
			position: absolute;
			top: -14px;
			right: -6px;
			background-image: url('../image/img/quxiao2.png');
			background-size: 100% 100%;
			background-color: white;
		}
		.zd2 {
			padding-top: 50px;
			text-align: center;
			justify-content: center;
			button {
				background-color: #56b9f4;
				color: #fff;
				margin-top: 12px;
				border: none;
				border-radius: 9px;
				width: 80%;
				font-size: 1em;
				padding: 0.4em 0;
			}
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="header">
			<!-- <img src="../image/s2.png" class="imgzc" @click="chooseShow=true" /> -->
			<img src="../image/s2.png" class="imgzc" v-if="teacherList.length > 0" @click="chooseShow=true" />
			<div class="header_title">教师中心</div>
			<!-- <img src="image/return.png" alt="" class="return" onclick="history.back()"> -->
		</div>

		<div class="div_student">
			<div class="div_student_item">
				<div @click="chooseImg">
					<img :src="getImg(teacher.avatar)" class="tx" />
				</div>
				<div class="div_student_ritht">
					<div class="div_student_ritht_head">
						<span style="font-size: 18px;font-weight: 600;" v-text="teacher.name"></span>
					</div>
					<div class="div_student_ritht_item">
						<img src="../image/img/school_icon.png" class="div_student_ritht_item_img" />
						<div v-text="teacher.schoolName" style="font-size: 16px"></div>
					</div>
					<div class="div_student_ritht_item" v-if="teacher.phone">
						<img style="width: 12px;height: 14px;" src="../image/img/phone_icon.png"
							class="div_student_ritht_item_img" />
						<div v-text="teacher.phone" style="font-size: 16px"></div>
					</div>
					<div class="div_student_ritht_item">
						<img style="width: 12px;height: 14px;" src="../image/img/teacher_icon.png"
							class="div_student_ritht_item_img" />
						<div style="font-size: 16px">老师</div>
					</div>
					<div class="div_student_ritht_item" @click="mask = true">
						<img style="height: 11px;" src="../image/img/class_icon.png"
							class="div_student_ritht_item_img" />
						<span class="chakanBtn">查看任课班级</span>
					</div>
				</div>
			</div>
		</div>

		<div class="main_zt">
			<div class="st-products-list">
				<div v-for="(item,index) in menusList" :key="index">
					<div class="st-products-list_item" @click="goUrl(item.href)">
						<img :src="item.img" class="main_timg">
						<span class="main_span" v-text="item.text"></span>
					</div>
					<hr class="hr_main" v-if="(index+1)<menusList.length" />
				</div>
			</div>
		</div>
		<div class="div_drawer_1" v-if="chooseShow" @click="chooseShow=false"></div>
		
		<div v-if="chooseShow" class="div_drawer">
			<div class="zuoche">
				<div class="zd2">
					<!-- <p v-if="teacher.classess.length">任教班级</p> -->
					<!-- <div v-for="(classes, index) in teacher.classess" :key="classes.id" v-text="classes.name"></div> -->
					<p v-if="teacherList.length>0">角色切换</p>
					<div v-for="(item, index) in teacherList"  :key="item.id" >
						<!-- <div v-for="(item, index) in teacherList" v-if="item.id!=teacher.id" :key="item.id" @click="getTeachers(index)"> -->
						<button  @click="getTeachers(index)">{{item.name}}</button>
					</div>
				</div>
<!-- 				<div>
					<button class="but_jb" @click="unbind0">解除绑定s</button>
				</div> -->
			</div>
		</div>
		<div class="mask_layer" v-if="mask">
			<div class="mask_item">
				<div class="mask_item_title">任课班级</div>
				<div class="mask_item_content">
					<div class="mask_item_content_th">
						<span class="mask_item_content_th_tr borderRight">班级名称</span>
						<span class="mask_item_content_th_tr">任课课程</span>
					</div>
					<div class="mask_item_content_tb" v-for="item in kechengList">
						<span class="mask_item_content_tb_tr borderRight">{{item.classesName}}</span>
						<span class="mask_item_content_tb_tr">{{item.courseName}}</span>
					</div>
				</div>
				<div class="cancel" @click="mask=false" />
			</div>
		</div>
		<!--抽屉-->
		
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<!-- <script src="/wechat/js/wx.js"></script> -->
	<script src="/js/common.js"></script>
	<script>

		var menus1 = [{
			text: '学生考勤',
			href: 'student_attendance.html',
			img: '../image/s5.png',
		}, 
		// {
		// 	text: '学生请假',
		// 	href: 'student_leave.html',
		// 	img: '../image/s6.png',
		// 	key: 'leave'
		// }, 
		{
			text: '我的考勤',
			href: '../attendance.html',
			img: '../image/s7.png',
		}, {
			text: '校车',
			href: '../bus.html',
			img: '../image/s8.png',
			key: 'bus'
		}, {
			text: '我的请假',
			href: 'my_leave.html',
			img: '../image/s9.png',
			key: 'leave'
		}, {
			text: '学生补签',
			href: 'punch_apply_list.html',
			img: '../image/s12.png',
			key: 'punch'
		}, {
			text: '补签',
			href: '../signin_apply_teacher.html',
			img: '../image/s12.png',
			key: 'punch'
		},];

		var menus2 = [{
			text: '班级通知',
			href: '../classes_notice.html',
			img: '../image/s14.png',
			key: 'classNotice'
		}, {
			text: '学校通知',
			href: '../school_notice.html',
			img: '../image/s15.png',
			key: 'notice'
		}, {
			text: '作业管理',
			href: 'student_homework.html',
			img: '../image/s16.png',
			key: 'homework'
		}, {
			text: '校园视频',
			href: '../monitoring.html',
			img: '../image/s17.png',
			key: 'live'
		}];

		var menus3 = [{
			text: '添加学生',
			href: 'student_item.html',
			img: '../image/s19.png',
			key: 'addStudent'
		}, {
			text: '学生管理',
			href: 'student_management.html',
			img: '../image/student.png',
			key: 'student_management'
		}, {
			text: '学校食谱',
			href: '../cookbook2.html#teacher',
			img: '../image/s21.png',
			key: 'cookbook'
		}, {
			text: '每周课表',
			href: '../public_timetable.html',
			img: '../image/s22.png',
			key: 'timetable'
		}, {
			text: '打卡消课',
			href: '../school_courses.html',
			img: '../image/s23.png',
			key: 'lesson'
		}, {
			text: '设备管理',
			href: '../school_equipment.html',
			img: '../image/sb.png'
		}]
		var menusList = [
			{
				text: '每周课表',
				href: '../public_timetable.html',
				img: '../image/img/myList1.png',
			},
			{
				text: '教务管理',
				href: 'educational_management.html',
				// href: '',
				img: '../image/img/educational.png',
			},
			// {
			// 	text: '学生管理',
			// 	href: 'student_management.html',
			// 	img: '../image/img/myList5.png',
			// },
			// {
			// 	text: '添加学员',
			// 	href: 'student_item.html',
			// 	img: '../image/img/myList6.png',
			// },
			{
				text: '报读课程',
				href: 'registerCourse.html',
				img: '../image/img/myList7.png',
			},
			{
				text: '审核管理',
				href: 'student_management.html',
				img: '../image/img/examine.png',
			},
			{
				text: '餐食管理',
				href: '../cookbook2.html#teacher',
				img: '../image/img/meals.png',
			},
			{
				text: '课销记录',
				href: '../school_courses.html',
				img: '../image/img/myList2.png',
			},
			{
				text: '机构通知',
				href: '../school_notice.html',
				img: '../image/img/myList3.png',
			},
			// {
			// 	text: '食谱查看',
			// 	href: '../cookbook2.html#teacher',
			// 	img: '../image/img/myList4.png',
			// },
			{
				text: '人脸打卡',
				href: './ceshi.html',
				img: '../image/img/myList9.png',
			},
			{
				text: '补签功能',
				href: '../signin_apply_teacher.html',
				img: '../image/img/myList9.png',
			},
		]
		function store(teacher) {
			sessionStorage['hxt-teacher'] = JSON.stringify(teacher);
		}

		new Vue({
			el: '#app',
			data: {
				teacher: {
					classess: [],
				},
				unread: {},
				teachers: [],
				
				chooseShow: false,
				menus1: menus1,
				menus2: menus2,
				menus3: menus3,
				teacherList: [],
				finish: false,
				mask: false,//弹窗
				kechengList: [],//查看已报名班级、课程
				classesIdList: [], // 班级id
				managedClassesAndCourses: [] //本地存储老师班级课程
			},
			created: function () {
				var teacher = getTeacher();
				// axios.get('/t/bounds').then(function (res) {
				// 	this.teachers = res.data;
				// }.bind(this));
				let teacherId = sessionStorage.getItem('teacherId');
				if(teacherId) {
					this.getTeachers(teacherId);
				} else {
					this.getTeachers(0);
				}
				if (teacher) {
					this.teacher = teacher;
					// this.getUnread();
					this.menus12();
					// this.getKeCheng();
					return;
				} 
				
				

				
			},
			methods: {
				goUrl: function (url) {
					window.location = url
				},
				getKeCheng: function () {
					
					// this.kechengList = []
					// var datas = []
					axios.get('/t/teachingClass/' + this.teacher.id).then(function (res) {
						this.kechengList = res.data;
						this.managedClassesAndCourses=res.data;
						// 提取 classesId 并存储到数组中
				this.classesIdList = res.data.map(function (item) {
					return item.classesId;
				});
				

				// 存储到本地存储
				localStorage.setItem('classesIdList', JSON.stringify(this.classesIdList));
				console.log(this.kechengList);
				//存储到会话
				sessionStorage.setItem('managedClassesAndCourses', JSON.stringify(this.managedClassesAndCourses));
						
					}.bind(this));
				},
				hide: function (schoolId) {
					localStorage.setItem('schoolId', schoolId);
					axios.get('/api/school/' + schoolId).then(function (res) {
						var hides = res.data.hides || {};
						localStorage.setItem('agentId', res.data.agentId);
						[this.menus1, this.menus2, this.menus3].forEach(function (it1) {
							it1.forEach(function (it) {
								Vue.set(it, 'hidden', ('key' in it) && hides[it.key]);
							});
						});
						
						this.finish = true;
					}.bind(this));
				},
				getTeachers: function (id) {
					axios.get('/t/bounds').then(function (res) {
						this.teacherList = res.data;
						this.teacher = res.data[id];
						sessionStorage.setItem('teacherId', id);
						store(this.teacher);
						localStorage.setItem('schoolId', res.data[id].schoolId);
							this.chooseShow = false;
						this.getUnread();
						this.menus12();
						this.getKeCheng();
					}.bind(this));
				},
				
				choose: function (id) {
					axios.post('/t/switch/' + id).then(function () {
						this.getTeacher();
						this.chooseShow = false;
					}.bind(this));
				},
				menus12: function () {
					if (this.teacher.president) {
						this.menus1 = menus1.concat({
							text: '职工考勤',
							href: 'teacher_attendance.html',
							img: '../image/s11.png',
						}, {
							text: '职工请假',
							href: 'teacher_leave.html',
							img: '../image/s10.png',
							key: 'leave'
						}, {
							text: '职工补签',
							href: 'punch_apply_list.html?byTeacher=true',
							img: '../image/s10.png',
							key: 'punch'
						});
						this.menus3 = menus3.concat({
							text: '访客记录',
							href: 'guest.html',
							img: '../image/s20.png',
							key: 'guest'
						})
					} else {
						this.menus1 = menus1;
						this.menus2 = menus2;
						this.menus3 = menus3;
					}
					this.hide(this.teacher.schoolId);
				},
				unbind0: function () {
					if (!confirm('确认取消绑定？')) return;
					this.unbind();
				},
				unbind: function () {
					axios.post('/t/unbind').then(function (res) {
						sessionStorage.removeItem('hxt-teacher');
						location.replace('/wechat/index.html');
					});
				},
				getImg: function (pic) {
					if (!pic) return '../image/img/user.jpg';
					return '/static/' + this.teacher.schoolId + '/teacher/' + pic;
				},
				upload: function () {
					var schoolId = this.teacher.schoolId;
					if (!schoolId) throw 'no school id';
					axios.post('/t/upload/teacher?schoolId=' + schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							this.setAvatar(res.data.data);
						}.bind(this));
				},
				getUnread: function () {
					var cache = getUnreadCache();
					if (cache) {
						this.unread = cache;
						this.calUnreadSchool(this.unread);
						return;
					}

					var unread = getUnread();

					axios.post('/t/unread', unread).then(function (res) {
						this.unread = res.data;
						axios.post('/t/unread2', unread).then(function (res) {
							var data = res.data;
							this.unread = Object.assign(this.unread, data);
							setUnreadCache(this.unread);
							this.calUnreadSchool(this.unread);
						}.bind(this));
					}.bind(this));
				},
				calUnreadSchool: function (o) {
					Vue.set(this.unread, 'school', o.news + o.honor + o.enrollment + o.teacherMien);
				},
				chooseImg: function () {
					if (wxReady) {
						wxChooseImg(1, 'teacher', this.setAvatar);
					} else {
						this.$refs.file.click();
					}
				},
				setAvatar: function (avatar) {
					axios.post('/t/teacher', toFormParams({ avatar: avatar })).then(function (res) {
						this.teacher.avatar = avatar;
						store(this.teacher);
						this.$refs.file.value = '';
					}.bind(this));
				}
			}
		});
		sessionStorage['hxt-user'] = 'teacher';

	</script>
</body>

</html>